<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/private_chat_new.css?v={:config('other.ui_version')}" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/group_chat.css?v={:config('other.ui_version')}" media="all">
</head>
<body>

<div class="chat_area">
    <div class="anchor_list">
        <div class="total_title" id="chatTotalArea"><strong>主播列表</strong><span>{$count|default='0'}</span></div>
        <div class="anchor_search anchorSearch"><input name="anchor_name" value="" placeholder="输入主播ID或昵称按回车搜索"></div>
        <div class="anchor_group_list">
            <ul id="privateCahtList">
                {empty name='list'}
                <div class="not_wait_chat">暂无待办信息</div>
                {/empty}
                {volist name='list' id='info'}
                <li chat-href="{:url('groupchat/chat_info')}?anchor_id={$info.id}" data-anchorid="{$info.id}">
                    <div class="avatar"><img src="{$info.avatar}"></div>
                    <div class="nick_id">
                        <p>{$info.nick_name}</p>
                        <p>ID:{$info.id}</p>
                    </div>
                    <div class="gchat_count">群({$info.gchat_count>99?'99+':$info.gchat_count})</div>
                </li>
                {/volist}
            </ul>
        </div>
    </div>

    <div class="layadmin-pagetabs chattab_pag layui-hide" id="LAY_chat_tabs">
        <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
            <ul class="layui-tab-title" id="LAY_chat_tabsheader">
                <li lay-id="{:url('groupchat/chat_info_default')}" lay-attr="" class="layui-this layui-hide"><i class="layui-icon layui-icon-home"></i></li>
            </ul>
        </div>
    </div>

    <div class="layui-body chattab_body" id="LAY_chat_body">
        <div class="layadmin-tabsbody-item layui-show">
            <iframe src="{:url('groupchat/chat_info_default')}" frameborder="0" class="layadmin-iframe"></iframe>
        </div>
    </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
        , version: "{:config('other.ui_version')}"
    }).extend({
        chatindex: 'lib/chatindex' //主入口模块
    }).use(['chatindex'], function () {
        var $ = layui.$;

        /**
         *
         * @param content
         */
        function getAnchorList(search_name = '') {
            var obj_chat_list = $('#privateCahtList');
            $.ajax({
                url: '{:url("groupchat/index")}',
                type: 'get',
                data: {search_name:search_name},
                dataType: 'json',
                success: function (res) {
                    var html = '';
                    // 待办总数
                    $('#chatTotalArea span').text(`${res.count}`)
                    // 获取选中项,更新的时候不要覆盖选中的
                    var select_li = obj_chat_list.find('.active')
                    var chat_list = res.list;
                    if (chat_list.length > 0) {
                        $.each(chat_list, function (i, val) {
                            if (select_li.data('anchorid') != val.id) {
                                html += `<li chat-href="{:url('groupchat/chat_info')}?anchor_id=${val.id}" data-anchorid="${val.id}">`;
                            } else {
                                html += `<li chat-href="${select_li.attr('chat-href')}" data-anchorid="${select_li.data('anchorid')}" class="active">`;
                            }
                            html += `<div class="avatar"><img  src="${val.avatar}"></div>
                                        <div class="nick_id">
                                            <p>${val.nick_name}</p>
                                            <p>ID:${val.id}</p>
                                        </div>
                                        <div class="gchat_count">群(${val.gchat_count})</div></li>`
                        });
                        obj_chat_list.html(html);
                        // 左侧如果没有选中项，重置一下右侧区域
                        if (obj_chat_list.find('.active').length < 1) {
                            resetIframe();
                        }
                    } else {
                        var html = '<div class="not_wait_chat">暂无主播信息</div>';
                        obj_chat_list.html(html);
                        // 右侧区域也重置
                        resetIframe();
                    }
                }
            });
        }


        // 重置iframe页面
        function resetIframe() {
            let iframe_obj = $('#LAY_chat_body .layadmin-iframe')
            let jump_url = "{:url('groupchat/chat_info_default')}";
            if (iframe_obj.attr('src') != jump_url) {
                iframe_obj.attr('src', jump_url);
            }
        }

        // 10秒更新一次聊天
        // setInterval(function () {
        //     getAnchorList();
        // }, 10000);

        // 搜索主播
        $('.anchorSearch input').on({
            keydown: function (ev) {
                var e = ev || window.event;
                if (e.keyCode == 13) {
                    e.preventDefault();
                    getAnchorList($(this).val());
                }
            },
        })
    });
</script>
</body>
</html>
